@extends('admin.layout.app')

@section('title', '菜單管理')

@section('style')
<link rel="stylesheet" href="{{asset('css/fontawesome-iconpicker.min.css')}}"/>
@endsection

@section('content')
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">菜单列表</div>
                    <div class="layui-card-body">
                        @foreach($menus??[] as $menu)
                            <div class="layui-collapse" lay-accordion="">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">
                                        <a class="{{$menu['icon']}}"></a>
                                        {{$menu['name']}}
                                        <div class="layui-btn-group" style="float: right">
                                            <a href="javascript:;" data-url="@broute('menu.edit', [$menu['id']])" style="margin-left: 0px" class="noleft edit-menu layui-btn layui-btn-xs ">
                                                <i class="layui-icon"></i>
                                            </a>
                                            <a href="javascript:;" data-url="@broute('menu.edit', [$menu['id']])" style="margin-left: 0px" class="noleft delete-menu layui-btn layui-btn-xs ">
                                                <i class="layui-icon"></i>
                                            </a>
                                        </div>
                                    </h2>
                                    @foreach($menu['childrens']??[] as $child)
                                        <div class="layui-colla-content layui-show">
                                            <a class="{{$child['icon']}}"></a>
                                            {{$child['name']}}
                                            <a href="{{$child['uri']}}" target="_blank">{{$child['uri']}}</a>
                                            <div class="layui-btn-group" style="float: right;">
                                                <a href="javascript:;" data-url="@broute('menu.edit', [$child['id']])" class="noleft edit-menu layui-btn layui-btn-normal layui-btn-xs">
                                                    <i class="layui-icon"></i>
                                                </a>
                                                <a href="javascript:;" data-url="@broute('menu.delete', [$child['id']])" class="noleft delete-menu layui-btn layui-btn-normal layui-btn-xs">
                                                    <i class="layui-icon"></i>
                                                </a>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">新增菜单</div>
                    <div class="layui-card-body">
                        <form class="layui-form" method="post" action="@broute('menu.store')">
                            <div class="layui-form-item">
                                <label class="layui-form-label">父菜单</label>
                                <div class="layui-input-block">
                                    <select name="parent_id" lay-filter="aihao">
                                        <option value="0">无</option>
                                        @foreach($menus??[] as $m)
                                            <option value="{{$m['id']}}">{{$m['name']}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" autocomplete="off" placeholder="请输入菜单标题" required class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <span class="input-group-addon layui-form-label">
                                    <i class="fas fa-address-book"></i>
                                </span>
                                <input data-placement="bottomRight" required class="layui-input-inline layui-input form-control icp icp-auto iconpicker-element iconpicker-input" value="fas fa-archive" type="text" name="icon">
                                <div class="layui-form-mid layui-word-aux">
                                    <i class="fas fa-info-circle"></i>
                                    <a href="http://fontawesome.io/icons/" target="_blank">更多点我</a>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">URI</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="uri" placeholder="URI地址" autocomplete="off" required value="#" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">排序ID</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="sort" placeholder="0-999" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">
                                        <i class="fas fa-info-circle"></i>
                                        数字小的排前面
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">&nbsp;</label>
                                <button class="layui-btn" lay-submit="" lay-filter="demo2">提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script type="text/javascript" src="{{ asset('js/fontawesome-iconpicker.min.js') }}"></script>
    <script>
        $(function () {
            $(".iconpicker-input").iconpicker();

            $(".edit-menu").click(function (e) {
                e.stopPropagation();
                var url = $(this).attr('data-url');
                location.href = url;
            })

            $(".delete-menu").click(function (e) {
                e.stopPropagation();
                var url = $(this).attr('data-url');
                layer.confirm("确认删除？", function(index) {
                    $.ajax({
                        url: url,
                        type: 'post',
                        success: function (json) {
                            if (!json.status) {
                                layer.msg(json.message, function(){});
                                return;
                            }
                            layer.msg(json.message);
                            window.location.reload();
                        }
                    });
                    layer.close(index);
                });
            })
        })
    </script>
@endsection
